<template>
	<view class="shoppingCart">
		<view class="list">
			<uni-swipe-action>
				<view v-if="CartList.length == 0" class="flex flex-column justify-center align-center mt-5">
					<text class="iconfont icon-gouwuchekong text-light-muted" style="font-size: 150rpx;"></text>
					<view class="mt-2">购物车空空如也~</view>
				</view>
				<uni-swipe-action-item v-for="(item, index) in CartList" :key="index" :right-options="options" @click="handleDelete($event, item)">
					<view class="content-box">
						<view class="item">
							<view class="item-checkbox-group">
								<checkbox-group @change="handleChange(item)">
									<checkbox color="#FC4353" :checked="item.checked"></checkbox>
								</checkbox-group>
							</view>
							<view class="img">
								<image :src="item.productImg" mode=""></image>
							</view>
							<view class="text">
								<text>{{item.productName}}</text>
								<text>{{item.updatedTime}}</text>
								<text>￥{{item.price}}/件</text>
							</view>
							<view class="button">
								<uni-number-box v-model="item.num" :max="999" :min="1" @change="handleChangNum(item.productId)"></uni-number-box>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		
		<view class="combined">
			<view class="left">
				<checkbox-group @change="handleCheckboxAllChange()">
					<checkbox color="#FC4353" :checked="isAllSelected"></checkbox>
				</checkbox-group>
				<text>全选(0)</text>
			</view>
			<view class="right">
				<view class="calculate">合计:<text>￥{{ price }}</text></view>
				<view class="button" @click="handleSettlement">结算</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useStore } from 'vuex';
import { ref, reactive, computed } from "vue";
import { cartQueryAll, cartUpdateCart, cartDelCart } from "@/api/shoppingCart/shoppingCart.js";
import { onLoad, onShow } from "@dcloudio/uni-app";
const store = useStore();

onShow(() => {
	handleGetCartData();
});

const options = reactive([
	{
		text: '删除',
		style: {
			backgroundColor: '#FC4353'
		}
	}
]);

const handleChangNum = (id) => {
	setTimeout(() => {
		const num = CartList.value.find(item => item.productId === id);
		console.log(num && num.num);
		cartUpdateCart({productId: id, num: num.num}).then(res => {
			if (res.code === 200) {
				uni.toast("数量变动成功");
				setTimeout(() => {
					handleGetCartData();
				}, 1000)
			}
		})
	}, 100)
};

const handleDelete = (e, item) => {
	const { id, num } = item;
	const params = {
		cartId: id,
		num
	}
	cartDelCart(params).then(res => {
		if (res.code === 200) {
			uni.toast("删除商品成功");
			setTimeout(() => {
				handleGetCartData()
			}, 1500)
		}
	})
}

const price = computed(() => { // 总价
	const result = CartList.value && CartList.value.filter(item => item.checked);
	let sumPrice = 0;
	result.forEach(item => {
		sumPrice += item.price * item.num;
	})
	return sumPrice;
});

const CartList = ref([]); // 购物车数据
const isAllSelected = ref(false);

const handleCheckboxAllChange = () => { // 全选 反选
	isAllSelected.value = !isAllSelected.value;
	CartList.value.forEach(item => {
		item.checked = isAllSelected.value
	});
};

const handleChange = (item) => { // item 复选框
	item.checked = !item.checked;
	if (!item.checked) {
		isAllSelected.value = false;
	} else {
		const result = CartList.value.every(v => v.checked);
		if (result) {
			isAllSelected.value = true;
		} else {
			isAllSelected.value = false;
		}
	}
};

const handleGetCartData = async() => {
	const { code, data } = await cartQueryAll();
	if (code === 200) {
		data.forEach(item => {
			item.checked = false
		})
		CartList.value = data;
	}
}

const handleSettlement = () => {
	// const result = CartList.value.filter(item => item.checked).map(v => v.id);
	const result = CartList.value.filter(item => item.checked);
	if (!result.length) {
		uni.toast('请选择商品后下单');
		return
	}
	uni.navigateTo({
		url:"/pages/orderConfirm/orderConfirm?data="+JSON.stringify(result)
	})
	// const params = {
	// 	cartIdList: result,
	// 	deliveryAddressId: 1
	// }
	// orderCreateOrder(params).then(res => {
	// 	const { code } = res;
	// 	if (code === 200) {
	// 		uni.toast("创建订单成功");
	// 		setTimeout(() => {
	// 			handleGetCartData()
	// 		}, 1500)
	// 	}
	// })
}

</script>

<style lang="scss" scoped>
@import '../../static/css/public.scss';
.content-box {
	flex: 1;
	position: relative;
	background-color: #fff;
	border: 1px solid #f5f5f5;
}

.shoppingCart {
	.list {
		.item {
			background-color: #fff;
			@include fja();
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			// .item-checkbox-group {
			// 	.uni-checkbox-input {
			// 		border-radius: 50% !important;
			// 	}
			// }
			
			.img {
				padding: 0 15rpx;
				@include wh(220rpx, 180rpx);
				
				image {
					border-radius: 16rpx;
					@include wh(100%, 100%);
				}
			}
			
			.text {
				display: flex;
				flex-direction: column;
				
				text {
					padding: 5rpx 0;
					@include sc(26rpx, #333);
					@include showEllipsis();
					width: 200rpx;
					
					&:last-child {
						color: #FC4353;
						font-weight: bold;
					}
				}
			}
		}
	}
	
	.combined {
		@include fja();
		width: 100%;
		padding: 28rpx 20rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: calc( var(--window-bottom) + 0px);
	
		.left {
			display: flex;
			align-items: center;
			
			text {
				padding-top: 10rpx;
				@include sc(28rpx, #999);
			}
		}
		
		.right {
			display: flex;
			.calculate {
				display: flex;
				align-items: center;
				@include sc(32rpx, #333);
				
				text {
					color: #FC4353;
				}
			}
			
			.button {
				margin-left: 33rpx;
				@include wh(202rpx, 74rpx);
				@include lineH(74rpx);
				text-align: center;
				@include sc(28rpx, #fff);
				border-radius: 37rpx;
				background: linear-gradient(90deg, #FC4353, #FF5E41);
			}
		}
	}
}
</style>
